<!--
 * @Description  : 漏斗
 * @Autor        : 杜康
 * @Date         : 2023-04-17 10:24:59 +0800
 * @LastEditors  : 杜康
 * @LastEditTime : 2023-04-22 15:49:03 +0800
-->
<template>
  <VCharts :option="options" :style="{ height: `${height}px`}" :autoresize="true" />
</template>

<script>
import mixins from "./mixins.js";
export default {
  name: "FunnelChart",
  mixins: [mixins],
  data() {
    return {
      options: {},
    };
  },
  methods: {
    /**
     * @description: 初始化
     * @return {*}
     * @author: 杜康
     * @Date: 2023-04-17 10:38:24 +0800
     */
    init() {
      this.heandleFunnel();
    },
    /**
     * @description: 处理漏斗图
     * @return {*}
     * @author: 杜康
     * @Date: 2023-04-17 10:40:47 +0800
     */
    heandleFunnel() {
      const { bidsTotal, bidsName, outbidTotal, outbidName } = this.data;
      this.options = {
        series: [
          {
            type: "funnel",
            // left: "10%",
            // top: "10%",
            // bottom: "10%",
            width: "60%",
            gap: 2,
            max: bidsTotal,
            label: {
              show: true,
              position: "inside",
            },
            data: [
              {
                value: bidsTotal,
                name: `${bidsTotal} ${bidsName}`,
                itemStyle: { color: "#36DC88" },
                label: {
                  fontSize: 16,
                  color: "#000",
                },
              },
              {
                // value: outbidTotal,
                value: 183680,
                name: `${outbidTotal} ${outbidName}`,
                itemStyle: { color: "#F9A646" },
                label: {
                  fontSize: 16,
                  color: "#000",
                  padding: [0, 0, 30, 0],
                  rich: {},
                },
              },
            ],
          },
        ],
      };
    },
  },
};
</script>
